<template>
  <div class="home">
    <img alt="一张猫图" id="home-img" src="https://placekitten.com/400/500">
    <sign-up class="sign-up"></sign-up>
  </div>
</template>

<script>
// @ is an alias to /src
import SignUp from '@/components/account/SignUp'

export default {
  name: 'Home',
  components: {
    SignUp
  }
}
</script>

<style>
  .home {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-basis: auto;
  }
  .sign-up{
    margin-top: 3%;
    padding: 3% 7%;
    width: 25%;
    background: #f1f5ff;
    border-radius: 2rem;
    min-width: 20rem;
    box-shadow: 0.5rem 0.5rem  1rem rgba(0, 0, 33, 0.1),-0.5rem -0.5rem 1rem rgba(255, 255, 255, 1);
  }
  #home-img {
    margin-right: 2rem;
    box-shadow: 0.5rem 0.5rem  1rem rgba(0, 0, 33, 0.1),-0.5rem -0.5rem 1rem rgba(255, 255, 255, 1);
  }
</style>
